diff --git a/landing/investor-profile-modal.css b/landing/investor-profile-modal.css new file mode 100644 --- /dev/null +++ b/landing/investor-profile-modal.css @@ -0,0 +1,4 @@ +div.modalContainer { + background-color: #11161d; + border-radius: 20px; +} diff --git a/landing/investor-profile-modal.react.js b/landing/investor-profile-modal.react.js new file mode 100644 --- /dev/null +++ b/landing/investor-profile-modal.react.js @@ -0,0 +1,20 @@ +// @flow + +import * as React from 'react'; + +import ModalOverlay from 'lib/components/modal-overlay.react'; +import { useModalContext } from 'lib/components/modal-provider.react'; + +import css from './investor-profile-modal.css'; + +function InvestorProfileModal(): React.Node { + const { popModal } = useModalContext(); + + return ( + +
+ + ); +} + +export default InvestorProfileModal; diff --git a/landing/investor-profile.css b/landing/investor-profile.css --- a/landing/investor-profile.css +++ b/landing/investor-profile.css @@ -6,6 +6,7 @@ padding: 40px 32px; background-color: #7e57c221; box-shadow: 0px 4px 4px #00000040, inset 0px 0px 12px 5px #7e57c24d; + cursor: pointer; } .profile img { @@ -44,10 +45,29 @@ font-size: 14px; } +a.profileModal { + background-color: #7e57c266; + cursor: default; + min-width: 576px; + width: max-content; + max-width: min(692px, 90vw); +} + +p.descriptionModal { + display: block; + min-height: 56px; + height: auto; +} + @media (max-width: 600px) { .profile { flex-direction: column; - margin: 0 16px; + max-width: 464px; + } + + a.profileModal { + min-width: 90vw; + width: 90vw; } div.investorInfoContainer { diff --git a/landing/investor-profile.react.js b/landing/investor-profile.react.js --- a/landing/investor-profile.react.js +++ b/landing/investor-profile.react.js @@ -1,5 +1,6 @@ // @flow +import classNames from 'classnames'; import * as React from 'react'; import css from './investor-profile.css'; @@ -10,17 +11,43 @@ +involvement: ?string, +imageURL: string, +onClick: () => void, + +isModalContent?: boolean, }; function InvestorProfile(props: Props): React.Node { - const { name, description, involvement, imageURL, onClick } = props; + const { + name, + description, + involvement, + imageURL, + onClick, + isModalContent, + } = props; + + const profileContainerClassName = React.useMemo( + () => + classNames({ + [css.profile]: true, + [css.profileModal]: isModalContent, + }), + [isModalContent], + ); + + const descriptionClassName = React.useMemo( + () => + classNames({ + [css.description]: true, + [css.descriptionModal]: isModalContent, + }), + [isModalContent], + ); return ( - + {`image

{name}

-

{description}

+

{description}

{involvement}